<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addTodo="addTodo" />
      <TodoMain
        :todos="todos"
        :changeDone="changeDone"
        :deleteTodo="deleteTodo"
      />
      <TodoFooter
        :todoIsDoneLength="todoIsDoneLength"
        :todosLength="todosLength"
        :changeAllTodoDone="changeAllTodoDone"
        :deleteTodos="deleteTodos"
      />
    </div>
  </div>
</template>

<script>
//引入子组件
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "",
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      //父组件App数据
      //当然目前开发案例:mock数据
      todos: JSON.parse(localStorage.getItem('TODOS'))||[
        { id: 1, title: "吃饭", done: false },
        { id: 2, title: "睡觉", done: false },
        { id: 3, title: "打豆豆", done: false },
        { id: 4, title: "游戏", done: false },
        { id: 5, title: "学习", done: false },
        { id: 6, title: "撸代码", done: false },
      ],
    };
  },
  //App根组件实例的方法
  methods: {
    //修改某一个事件的done的属性
    changeDone(id, done) {
      //修改App的数据---数组检测数据变化【变更、替换】

      //第一种想法:错误的
      //this.todo[id - 1].done = done;有可能出现错误[加入新增的id为0]

      //第二种想法:for 完全可以
      // for(var i = 0 ; i < this.todos.length ;i++){
      //        if(this.todos[i].id ==id){
      //           this.todos[i].done = done;
      //        }
      // }

      //最终解决方案:map
      this.todos = this.todos.map((item) =>
        item.id == id ? { ...item, done } : item
      );
    },
    //删除某一个事件
    deleteTodo(id) {
      //待定
      //从爷爷的数组当中删除id这一项
      //数组的替换
      //返回布尔值进行过滤，哪些需要、哪些不需要
      this.todos = this.todos.filter((item) => item.id != id);
    },
    //添加一个事件
    addTodo(todo) {
      //将来这里需要做什么?
      //将父组件的数据数组新增数据
      //变更：七个方法 push|pop|shift|unshift|sort|splice|reverse
      //向App数据当中添加新的事件之前，需要判断，判断事件是否有出现过！
      let isRepeat = this.todos.find((item) => {
        //在判断新增的事件title是否在原来的数组元素中是否出现过
        return item.title == todo.title;
      });
      //判断是否向数组添加新的元素
      !isRepeat && this.todos.push(todo);
    },
    //修改全部事件的done状态
    changeAllTodoDone(done) {
      //第一种方法：通过循环语句实现、each
      //第二种方式：map【替换】
      //把原来数组里面元素进行浅拷贝，修改done属性值为子组件传递过来的布尔值！
      this.todos = this.todos.map((item) => ({ ...item, done }));
    },
    //删除数组当中事件done为真的元素
    deleteTodos() {
      //把已经完成的事件删除
      //用什么方法？？？
      //替换数组:已经完成的事件不需要，未完成的事件才需要！
      this.todos = this.todos.filter((item) => !item.done);
    },
  },
  //计算属性
  computed: {
    //已经完成的事件有多少个！
    todoIsDoneLength() {
      //怎么书写呀-筛选出已经完成事件的个数
      //返回的是一个数字并非数组
      return this.todos.filter((item) => item.done).length;
    },
    //一共有多少个事件
    todosLength() {
      return this.todos.length;
    },
  },
  watch: {
     //监听todo的属性变化，本地存储持久化存户
     todos:{
       //深度监听
       deep:true,
       handler(){
         //本地存储数据----字符串【数组变为字符串】
         localStorage.setItem("TODOS",JSON.stringify(this.todos));
       }
     }
  },
};
</script>

<style scoped>
</style>
